<template>
  <a-list item-layout="horizontal" :data-source="albums">
    <a-list-item slot="renderItem" slot-scope="album">
      <a-list-item-meta>
        <template #description>
          <router-link :to="`/albums/${album.id}`" class="flex w-full place-items-center justify-between gap-4 rounded-r-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-immich-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary pl-10 group-hover:sm:px-10 md:px-10">
            <div>
              <div
                class="h-6 w-6 bg-cover rounded bg-gray-200 dark:bg-gray-600"
                :style="{ backgroundImage: album.albumThumbnailAssetId ? `url('${getAssetThumbnailUrl({ id: album.albumThumbnailAssetId })}')` : '' }"
              ></div>
            </div>
            <div class="grow text-sm font-medium truncate">
              {{ album.albumName }}
            </div>
          </router-link>
        </template>
      </a-list-item-meta>
    </a-list-item>
  </a-list>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { getAssetThumbnailUrl } from '@/utils';
import { getAllAlbums } from '@immich/sdk';
import { handleError } from '@/utils/handle-error';
import { t } from 'vue-i18n';

export default {
  name: 'RecentAlbums',
  data() {
    return {
      albums: [],
    };
  },
  computed: {
    ...mapState('user', ['userInteraction']),
  },
  methods: {
    ...mapActions('user', ['resetUserInteraction', 'setRecentAlbums']),
    async fetchAlbums() {
      try {
        const allAlbums = await getAllAlbums({});
        this.albums = allAlbums.sort((a, b) => (a.updatedAt > b.updatedAt ? -1 : 1)).slice(0, 3);
        this.setRecentAlbums(this.albums);
      } catch (error) {
        handleError(error, t('failed_to_load_assets'));
      }
    },
  },
  async mounted() {
    if (this.userInteraction.recentAlbums) {
      this.albums = this.userInteraction.recentAlbums;
      return;
    }
    await this.fetchAlbums();
  },
};
</script>

<style scoped>
/* ... existing code ... */
</style>